<template>
  <div>
    <div id="chart_id_top"></div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
let My_chart = null;
export default {
  props: {
    data: Array,
  },
  setup(props) {
    const state = reactive({
      info: [],
    });
    onMounted(() => {
      setTimeout(() => {
        state.info = props.data;
        getMy_chart();
      }, 500);
    });
    //底部折线
    const getMy_chart = () => {
      let list = state.info;
      let arr = [];
      list.forEach((i) => {
        let obj = {};
        obj.name = i.name;
        obj.max = 100;
        obj.value = i.value;
        arr.push(obj);
      });
      var data = state.info;
      let dataArr = [];
      data.forEach((item) => {
        dataArr.push(item.value);
      });
      My_chart = window.echarts.init(document.getElementById("chart_id_top"));
      let option = {
        title: {
          top: "48%",
          bottom: "center",
          left: "center",
          textStyle: {
            rich: {
              span: {
                width: 74,
                height: 69,
                borderRadius: 50,
                fontSize: 18,
                align: "center",
                verticalAlign: "middle",
                lineHeight: 74,
                padding: [0, 0, 5, 0],
              },
            },
          },
        },
        radar: {
          center: ["50%", "60%"],
          radius: "70%",
          splitNumber: 5,
          name: {
            textStyle: {
              color: "#606266",
              borderRadius: 3,
              fontSize: 16,
            },
          },
          nameGap: "5",
          indicator: arr,
          // 圈圈网颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: [
                "rgba(108, 254, 255, 0)",
                "rgba(108, 254, 255, 0.30196078431372547)",
                "rgba(108, 254, 255, 0.30196078431372547)",
                "rgba(108, 254, 255, 0.30196078431372547)",
                "rgba(108, 254, 255, 0.30196078431372547)",
              ],
              width: "1",
            },
          },
          splitArea: {
            areaStyle: {
              color: "#909399",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 233, 234, 0.30196078431372547)",
            },
          },
        },
        series: [
          {
            name: "",
            type: "radar",
            symbol: "circle",
            symbolSize: "8",
            label: {
              show: false,
              // 让它的点没有显示格式
              formatter: "",
              color: "#fff",
              fontStyle: {
                fontSize: 33,
              },
            },
            data: [
              {
                value: dataArr,
                name: "健康态势",
                lineStyle: {
                  //网调线
                  color: "#6CFEFF",
                  // color: "rgba(108, 254, 255, 0.4)",
                  background:
                    "radial-gradient(circle, rgba(108, 254, 255, 0) 0%, rgba(108, 254, 255, 0.4) 100%)",
                },
                symbolSize: 8, //圆圈大小
                itemStyle: {
                  //调点的样式
                  show: true,
                  color: "rgba(108, 254, 255, 1)",
                  shadowColor: "rgba(108, 254, 255, 1)",
                  shadowBlur: 10,
                  fontSize: 28,
                },
                areaStyle: {
                  // 内网颜色
                  normal: {
                    color: {
                      type: "radial",
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(108, 254, 255, 0)",
                        },
                        {
                          offset: 1,
                          color: "rgba(108, 254, 255, 0.4)",
                        },
                      ],
                      globalCoord: false,
                    },
                    opacity: 1,
                  },
                },
              },
            ],
          },
        ],
      };
      My_chart.setOption(option);
    };
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang='scss' scoped>
#chart_id_top {
  width: 100%;
  height: 310px;
}
</style>